{% extends "base.html" %}
{% block title %}个人资料 - {{ user.real_name }} - 乒乓球培训管理系统{% endblock %}
{% block page_title %}个人资料{% endblock %}

{% block extra_css %}
<style>
.profile-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.profile-header {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 2.5rem 2rem;
    color: white;
    position: relative;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.05);
    transform: rotate(45deg);
    pointer-events: none;
}

.profile-avatar-large {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.3);
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.profile-content {
    background: white;
    padding: 2rem;
}

.info-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f3f4;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f8f9fa;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: scale(1.05);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.info-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f8f9fa;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #6c757d;
    min-width: 120px;
    margin-right: 1rem;
}

.info-value {
    color: #495057;
    flex: 1;
}

.role-badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-left: 2px solid #e9ecef;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0.5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #007bff;
}

.activity-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .profile-header {
        text-align: center;
        padding: 2rem 1rem;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .info-label {
        min-width: auto;
        margin-right: 0;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 个人资料头部 -->
    <div class="profile-container">
        <div class="profile-header">
            <div class="row align-items-center">
                <div class="col-md-3 text-center">
                    {% if user.photo_url %}
                    <img src="{{ user.photo_url }}" alt="{{ user.real_name }}" class="profile-avatar-large">
                    {% else %}
                    <div class="profile-avatar-large mx-auto bg-white bg-opacity-25 d-flex align-items-center justify-content-center">
                        <i class="bi bi-person-fill" style="font-size: 4rem;"></i>
                    </div>
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <h2 class="mb-3">{{ user.real_name }}</h2>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-2">
                                <i class="bi bi-telephone me-2"></i>{{ user.phone }}
                            </div>
                            {% if user.email %}
                            <div class="mb-2">
                                <i class="bi bi-envelope me-2"></i>{{ user.email }}
                            </div>
                            {% endif %}
                            {% if user.campus %}
                            <div class="mb-2">
                                <i class="bi bi-building me-2"></i>{{ user.campus.name }}
                            </div>
                            {% endif %}
                            <div class="mb-0">
                                <i class="bi bi-calendar me-2"></i>
                                注册时间：{{ user.created_at.strftime('%Y年%m月%d日') if user.created_at else '未知' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 text-center">
                    <div class="mb-3">
                        <span class="role-badge bg-white text-primary">
                            {% if user.is_super_admin() %}
                                <i class="bi bi-shield-check me-1"></i>超级管理员
                            {% elif user.is_campus_admin() %}
                                <i class="bi bi-person-badge me-1"></i>校区管理员
                            {% elif user.is_coach() %}
                                <i class="bi bi-person-check me-1"></i>教练
                            {% else %}
                                <i class="bi bi-mortarboard me-1"></i>学员
                            {% endif %}
                        </span>
                    </div>
                    {% if user.gender or user.age %}
                    <div class="mb-2">
                        {% if user.gender %}
                        <span class="badge bg-white text-info me-2">
                            {% if user.gender == 'male' %}
                                <i class="bi bi-gender-male me-1"></i>男性
                            {% elif user.gender == 'female' %}
                                <i class="bi bi-gender-female me-1"></i>女性
                            {% endif %}
                        </span>
                        {% endif %}
                        {% if user.age %}
                        <span class="badge bg-white text-success">
                            <i class="bi bi-cake me-1"></i>{{ user.age }}岁
                        </span>
                        {% endif %}
                    </div>
                    {% endif %}
                    <div>
                        <span class="badge {% if user.status == 'active' %}bg-success{% else %}bg-secondary{% endif %} text-white">
                            <i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i>
                            {% if user.status == 'active' %}活跃用户{% else %}{{ user.status }}{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="profile-content">
            <!-- 统计概览 -->
            <div class="stat-grid">
                <div class="stat-card" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <div class="stat-value">{{ stats.account_age_days }}</div>
                    <div class="stat-label">账户使用天数</div>
                </div>
                {% if user.is_student() %}
                <div class="stat-card" style="background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);">
                    <div class="stat-value">{{ stats.total_reservations or 0 }}</div>
                    <div class="stat-label">预约次数</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);">
                    <div class="stat-value">{{ stats.total_coaches or 0 }}</div>
                    <div class="stat-label">合作教练</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);">
                    <div class="stat-value">¥{{ stats.total_spending or 0 }}</div>
                    <div class="stat-label">总消费</div>
                </div>
                {% elif user.is_coach() %}
                <div class="stat-card" style="background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);">
                    <div class="stat-value">{{ stats.total_students or 0 }}</div>
                    <div class="stat-label">教授学员</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);">
                    <div class="stat-value">{{ stats.total_classes or 0 }}</div>
                    <div class="stat-label">完成课程</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);">
                    <div class="stat-value">¥{{ stats.total_earnings or 0 }}</div>
                    <div class="stat-label">总收入</div>
                </div>
                {% elif user.is_campus_admin() %}
                <div class="stat-card" style="background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);">
                    <div class="stat-value">{{ stats.campus_students or 0 }}</div>
                    <div class="stat-label">校区学员</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);">
                    <div class="stat-value">{{ stats.campus_coaches or 0 }}</div>
                    <div class="stat-label">校区教练</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);">
                    <div class="stat-value">{{ stats.campus_tables or 0 }}</div>
                    <div class="stat-label">球台数量</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧：基本信息和设置 -->
        <div class="col-md-6">
            <!-- 基本信息 -->
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-person-lines-fill me-2"></i>基本信息
                </h5>

                <div class="info-row">
                    <div class="info-label">用户名</div>
                    <div class="info-value">{{ user.username }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">真实姓名</div>
                    <div class="info-value">{{ user.real_name }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">手机号</div>
                    <div class="info-value">{{ user.phone }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">邮箱</div>
                    <div class="info-value">{{ user.email or '未设置' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-label">性别</div>
                    <div class="info-value">
                        {% if user.gender == 'male' %}男性
                        {% elif user.gender == 'female' %}女性
                        {% else %}未设置{% endif %}
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">年龄</div>
                    <div class="info-value">{{ user.age or '未设置' }}</div>
                </div>
                {% if user.bio %}
                <div class="info-row">
                    <div class="info-label">个人简介</div>
                    <div class="info-value">{{ user.bio }}</div>
                </div>
                {% endif %}
            </div>

            <!-- 教练专业信息 -->
            {% if user.is_coach() %}
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-award me-2"></i>专业信息
                </h5>

                <div class="info-row">
                    <div class="info-label">教练等级</div>
                    <div class="info-value">
                        {% if user.coach_level == 'senior' %}高级教练
                        {% elif user.coach_level == 'middle' %}中级教练
                        {% else %}初级教练{% endif %}
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">课时费</div>
                    <div class="info-value">¥{{ user.hourly_rate or '待设置' }}/小时</div>
                </div>
                <div class="info-row">
                    <div class="info-label">执教年限</div>
                    <div class="info-value">{{ user.experience_years or 0 }}年</div>
                </div>
                {% if user.teaching_style %}
                <div class="info-row">
                    <div class="info-label">教学风格</div>
                    <div class="info-value">{{ user.teaching_style }}</div>
                </div>
                {% endif %}
                {% if user.achievements %}
                <div class="info-row">
                    <div class="info-label">个人成就</div>
                    <div class="info-value">{{ user.achievements }}</div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- 快捷操作 -->
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-gear me-2"></i>账户管理
                </h5>

                <div class="action-buttons">
                    <a href="{{ url_for('profile.edit') }}" class="btn-gradient">
                        <i class="bi bi-pencil"></i>编辑资料
                    </a>
                    <a href="{{ url_for('profile.change_password') }}" class="btn-gradient">
                        <i class="bi bi-key"></i>修改密码
                    </a>
                    <a href="{{ url_for('profile.upload_avatar') }}" class="btn-gradient">
                        <i class="bi bi-camera"></i>上传头像
                    </a>
                </div>
            </div>
        </div>

        <!-- 右侧：活动和历史 -->
        <div class="col-md-6">
            <!-- 账户活动 -->
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-activity me-2"></i>账户活动
                </h5>

                <div class="timeline-item">
                    <h6 class="mb-1">最后登录</h6>
                    <div class="activity-card">
                        {% if stats.last_activity %}
                            {{ stats.last_activity.strftime('%Y年%m月%d日 %H:%M') }}
                        {% else %}
                            从未登录
                        {% endif %}
                    </div>
                </div>

                <div class="timeline-item">
                    <h6 class="mb-1">账户创建</h6>
                    <div class="activity-card">
                        {{ user.created_at.strftime('%Y年%m月%d日') if user.created_at else '未知' }}
                        <small class="text-muted d-block">已使用 {{ stats.account_age_days }} 天</small>
                    </div>
                </div>

                <div class="timeline-item">
                    <h6 class="mb-1">资料完整度</h6>
                    <div class="activity-card">
                        {% set completeness = 0 %}
                        {% if user.real_name %}{% set completeness = completeness + 20 %}{% endif %}
                        {% if user.email %}{% set completeness = completeness + 15 %}{% endif %}
                        {% if user.gender %}{% set completeness = completeness + 10 %}{% endif %}
                        {% if user.age %}{% set completeness = completeness + 10 %}{% endif %}
                        {% if user.bio %}{% set completeness = completeness + 15 %}{% endif %}
                        {% if user.photo_url %}{% set completeness = completeness + 30 %}{% endif %}

                        <div class="progress mb-2">
                            <div class="progress-bar bg-success" style="width: {{ completeness }}%"></div>
                        </div>
                        <small class="text-muted">{{ completeness }}% 完成</small>
                    </div>
                </div>
            </div>

            <!-- 安全信息 -->
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-shield-check me-2"></i>安全信息
                </h5>

                <div class="info-row">
                    <div class="info-label">密码强度</div>
                    <div class="info-value">
                        <span class="badge bg-success">强</span>
                        <small class="text-muted ms-2">上次修改：最近</small>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">登录安全</div>
                    <div class="info-value">
                        <span class="badge bg-info">正常</span>
                        <small class="text-muted ms-2">无异常登录</small>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-label">数据备份</div>
                    <div class="info-value">
                        <span class="badge bg-warning">建议</span>
                        <small class="text-muted ms-2">定期导出数据</small>
                    </div>
                </div>
            </div>

            <!-- 系统通知 -->
            <div class="info-card">
                <h5 class="section-title">
                    <i class="bi bi-bell me-2"></i>系统提醒
                </h5>

                {% if not user.email %}
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    建议设置邮箱以接收重要通知
                </div>
                {% endif %}

                {% if not user.photo_url %}
                <div class="alert alert-info">
                    <i class="bi bi-camera me-2"></i>
                    上传头像让其他用户更容易识别您
                </div>
                {% endif %}

                {% if user.is_coach() and not user.bio %}
                <div class="alert alert-primary">
                    <i class="bi bi-file-text me-2"></i>
                    完善个人简介有助于吸引更多学员
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
    // 添加淡入动画
    const cards = document.querySelectorAll('.info-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';

        setTimeout(() => {
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });
});

// 统计卡片点击效果
document.querySelectorAll('.stat-card').forEach(card => {
    card.addEventListener('click', function() {
        this.style.transform = 'scale(0.95)';
        setTimeout(() => {
            this.style.transform = 'scale(1.05)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        }, 150);
    });
});

// 快捷操作按钮点击反馈
document.querySelectorAll('.btn-gradient').forEach(btn => {
    btn.addEventListener('click', function(e) {
        // 创建点击波纹效果
        const ripple = document.createElement('span');
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;

        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        ripple.style.position = 'absolute';
        ripple.style.background = 'rgba(255,255,255,0.3)';
        ripple.style.borderRadius = '50%';
        ripple.style.transform = 'scale(0)';
        ripple.style.animation = 'ripple 0.6s linear';
        ripple.style.pointerEvents = 'none';

        this.style.position = 'relative';
        this.style.overflow = 'hidden';
        this.appendChild(ripple);

        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
});

// 添加波纹动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}